<template>
	<a-menu :inline-collapsed="collapsed" :openKeys="openKeys" v-model:selectedKeys="selectedKeys" @select="changeRoute" @openChange="onOpenChange" mode="inline">
		<template v-for="item in menuDatas" :key="item.id">
			<a-sub-menu :key="item" v-if="!item.front_path && item.children && item.children.length > 0">
				<template #icon>
					<img :src="item.image" />
				</template>
				<template #title>{{ item.name }}</template>
				<a-menu-item v-for="item1 in item.children" :key="item1.front_path">{{ item1.name }}</a-menu-item>
			</a-sub-menu>
			<a-menu-item v-else :key="item.front_path">
				<template #icon>
					<img :src="item.image" />
				</template>
				{{ item.name }}
			</a-menu-item>
		</template>
	</a-menu>
</template>

<script>
import { defineComponent } from "vue";
import { Menu } from "ant-design-vue";
import baseUtil from "@/util/baseUtil";
export default defineComponent({
	name: "Menu",
	props: {
		collapsed: Boolean,
		routeInfo: Object,
		selected: {
			type: String,
			default: "",
		},
	},
	components: {
		AMenu: Menu,
		ASubMenu: Menu.SubMenu,
		AMenuItem: Menu.Item,
	},
	data() {
		return {
			loginId: null,
			user: null,
			bigViweUrl: "",
			bigViweUrl2: "",
			roleId: null, //1：分局，2.派出所
			selectedKeys: [],
			openKeys: [],
			menuDatas: [],
		};
	},
	watch: {
		selected(newVal) {
			if (newVal) {
				this.selectedKeys = [newVal];
			}
		},
	},
	mounted() {
		this.selectedKeys = this.selected ? [this.selected] : [];
		if (sessionStorage.getItem("user")) {
			this.user = JSON.parse(sessionStorage.getItem("user"));
		}
		const array = this.user ? this.user.auths || [] : [];
		array.map(e=>{
			if(e.image){e.image = process.env.VUE_APP_BASEPATH === '/' ? e.image : process.env.VUE_APP_BASEPATH+e.image }
			return e;
		})
		this.menuDatas = baseUtil.GetByMenu(array);
		console.log("this.menuDatas:", this.menuDatas);
	},
	methods: {
		changeRoute(e) {
			this.$router.push(e.key);
		},
		onOpenChange(e) {
			if (e && e.length > 0) {
				this.openKeys = e.length > 1 ? [e[1]] : [e[0]];
			}
		},
	},
});
</script>
